<template>
  <div class="header">
    <input type="text" placeholder="请输入待办事宜按回车键确认" v-model="title" @keyup.enter="addItem" />
  </div>

</template>
   
<script>
export default {
  data() {
    return {
      title: ''
    };
  },
//   声明接受从APP传递回来的属性
  props: {
    addTodo: Function
  },
  methods: {
    addItem() {
      //   1 检查输入合法性
      const title = this.title.trim();
      if (!title) {
        alert('请输入要添加的待办事项');
        return;
      }
      // 2 根据输入内容生成一个todo对象
      const todo = { title, complete: false };
      // 3 将生成的todo对象添加到todos
      this.addTodo(todo);

      // 4 清除输入
      this.title = ''
    }
  }
};
</script>

<style scoped>
.header {
  widows: 100%;
  background: transparent;
  border: 1px solid #c1cedd;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.header input {
  width: 100%;
  height: 25px;
  background: transparent;
  font-size: 14px;
  outline: none;
  border: none;
  color: #000;
  text-indent: 1rem;
}
</style>